<%--
  Created by IntelliJ IDEA.
  User: Leandro
  Date: 24/11/12
  Time: 15:41
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta name='layout' content='main'/>
    <title>Entrename</title>
    <r:script>
        jQuery(function () {
            jQuery("#slider").slider({
                range:"max",
                min:1,
                max:10,
                value:7,
                slide:function (event, ui) {
                    jQuery("#puntaje").val(ui.value);
                }
            });
            jQuery("#puntaje").val(jQuery("#slider").slider("value"));
        });
    </r:script>
    <style type="text/css">
    #slider {
        margin-top: 10px;
    }

    #slider .ui-slider-range {
        background: #729fcf;
    }

    #slider .ui-slider-handle {
        border-color: #729fcf;
    }
    </style>
</head>

<body>

<br>

<div align="center">
    <table cellspacing="0" width="800px" align="center">
        <tr>
            <td align="center">
                <g:set var="imageName" value="${"imagen" + fotoId + ".jpg"}"/>
                <img src="${createLinkTo(dir: 'images/training', file: imageName)}" width="160px"
                     height="180px" alt="Pepito"/>
                <br>



                <g:form>
                    <p style="margin-top: 5px;">
                        <label style="float: left;" for="puntaje">Puntaje:</label>
                        <input type="text" name="puntaje" id="puntaje"
                               style="border: 0; color: #729fcf; font-weight: bold;" value=""/>
                    </p>

                    <div id="slider"></div>
                    <input type="hidden" name="fotoId" value="${fotoId}"/>
                    <br>
                    <g:submitButton name="fin" value="Fin" class="button"/>
                    <g:submitButton name="continue" value="Puntuar" class="button"/>
                </g:form>
            </td>
        </tr>
    </table>
</div>
<br>
</body>
</html>